/* 
该文件是整个项目的入口文件
*/

// 方法1使用render函数将App组件放入容器中
//引入Vue，之前的Vue引用的是完整的Vue,但现在升级了vue指定是运行版Vue
import Vue from 'vue'
//引入App组件，它是所有组件的父组件
import App from './App.vue'
//关闭vue的生产提示
Vue.config.productionTip = false

/* 
	关于不同版本的Vue：
	1.vue.js与vue.runtime.xxx.js的区别：
	(1).vue.js是完整版的Vue，包含：核心功能+模板解析器。
	(2).vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。

	2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用
		render函数接收到的createElement函数去指定具体内容。
*/

//创建Vue实例对象---vm
new Vue({
	// el:'#app'等价于new Vue({}).$mount('#app') 指定vue服务的容器
	el: '#app',
	// render函数将App组件放入容器中
	render: r => r(App),

	// // 验证完整render写法，render函数接收参数为一个创建元素函数function
	// render(createElement) {
	// 	console.log('render')
	// 	// 输出接收参数类型
	// 	console.log(typeof createElement)
	// 	// 将元素放入容器
	// 	return createElement('h1','你好啊')
	// }

	// // 验证简化render写法，没有用到this可使用箭头函数，
	// render:(createElement)=>{
	// 	return createElement('h1','你好啊')
	// }

	// // 最终验证简化render写法，createElement当前两个参数时标签+值，可直接放入vue组件就是一个参数。
	// render:createElement=>createElement('h1','你好啊')
})

// // 方法2引入带有模板解析器的Vue
// import Vue from 'vue/dist/vue'
// Vue.config.productionTip = false

// new Vue({
// 	el: '#app',
// 	// 当没有模板引擎时，值得仔细推敲的错误写法
// 	template:`<h1>你好啊</h1>`,
// })
